/*
 * @Author: 
 * @Date: 2022-01-27 10:30:55
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-18 16:16:22
 * @Description: 订阅消息publish
 */
import React, { Component } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'
import { Input, Button } from 'antd'

class Search extends Component {
  handleSearch = () => {
    const { keyWord: { value }} = this
    if (value.trim() === '') return
    PubSub.publish('initState', { isFirst: false, isLoad: true })
    axios.get(`/api1/search/users2?q=${value}`)
      .then(
        res => {
          if (res.status !== 200) return
          PubSub.publish('initState', { isLoad: false, searchList: res.data.items })
        },
        err => {
          PubSub.publish('initState', { isLoad: false, isError: err.message })
        }
      )
  }
  render() {
    return (
      <div className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div style={{ display: 'flex' }}>
          <Input ref={c => this.keyWord = c} type="text" placeholder="enter the name you search" />&nbsp;
          <Button onClick={this.handleSearch}>Search</Button>
        </div>
      </div>
    );
  }
}

export default Search;
